<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>heatmap.js | Examples: ArcGIS Heatmap Layer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <meta name="description" content="heatmap.js example showing a static ArcGIS heatmap layer">
    <meta name="keywords" content="arcgis heatmap, heatmap layer arcgis">
    <meta name="author" content="Patrick Wied">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css" />
        <script type="text/javascript" src="src/heatmap.js"></script>
        <script type="text/javascript" src="src/heatmap-arcgis.js"></script>
        <script type="text/javascript">
            dojo.require("esri.map");
            dojo.require("esri.layers.FeatureLayer");

            // Variables
            var map;
            var heatLayer;
            var featureLayer;

            // get the features within the current extent from the feature layer
            function getFeatures() {
                // set up query
                var query = new esri.tasks.Query();
                // only within extent
                query.geometry = map.extent;
                // give me all of them!
                query.where = "1=1";
                // make sure I get them back in my spatial reference
                query.outSpatialReference = map.spatialReference;
                // get em!
                featureLayer.queryFeatures(query, function (featureSet) {
                    var data = [];
                    // if we get results back
                    if (featureSet && featureSet.features && featureSet.features.length > 0) {
                        // set data to features
                        data = featureSet.features;
                    }
                    // set heatmap data
                    heatLayer.setData(data);
                });
            }

            // Init
            function init() {
                window.prettyPrint && prettyPrint();
                // initial extent of map
                var initExtent = new esri.geometry.Extent({
                    xmax: -13624229.32056175,
                    xmin: -13625120.886837104,
                    ymax: 4548374.604660432,
                    ymin: 4547966.144290476,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                // create map
                map = new esri.Map("map", {
                    extent: initExtent,
                    sliderStyle: "small"
                });
                //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);
                // once map is loaded
                dojo.connect(map, 'onLoad', function (theMap) {
                    //resize the map when the browser resizes
                    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                    // create heat layer
                    heatLayer = new HeatmapLayer({
                        /* config: {
                            "useLocalMaximum": true,
                            "radius": 90,
                            "gradient": {
                                0.45: "rgb(000,000,255)",
                                0.55: "rgb(000,255,255)",
                                0.65: "rgb(000,255,000)",
                                0.95: "rgb(255,255,000)",
                                1.00: "rgb(255,000,000)"
                            }
                        }, */
                        "map": map,
                        "domNodeId": "heatLayer",
                        "opacity": 0.85
                    });
                    // add heat layer to map
                    map.addLayer(heatLayer);
                    // resize map
                    map.resize();
                    // create feature layer to get the points from
                    featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
                        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                        visible: false
                    });
                    map.addLayer(featureLayer);
                    // get features from this layer
                    getFeatures();
                    // on map extent change
                    dojo.connect(map, "onExtentChange", function (extent) {
                        // get features
                        getFeatures();
                        featureLayer.hide();
                        heatLayer.show();
                    });
                    
                });
            }
            // call init on load of dojo
            dojo.addOnLoad(init);
        </script>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html">heatmap.js</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Home</a></li>
              <li class="active"><a href="examples.html" title="heatmap.js examples">Examples</a></li>
              <li><a href="showcases.html" title="Real World Usage of heatmap.js">Showcases</a></li>
              <li><a href="https://github.com/pa7/heatmap.js/blob/master/README.md" target="_blank" title="Documentation on Github">Documentation</a></li>
              <li><a href="contact.html" title="Contact for Support &amp; Feedback">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
        <div class="page-header">
            <h1>
            Examples
            <small>See how easy it is to create heatmaps with heatmap.js</small>
            </h1>
        </div>
        <div class="row">
            <div class="span4 well" style="padding:8px 0;">
                <ul class="nav nav-list">
                    <li class="nav-header">
                    Basic Examples
                    </li>
                    <li>
                        <a href="examples.html" title="static heatmap example">Static Heatmap</a>
                    </li>
                    <li>
                        <a href="example-heatmap-legend.html" title="static heatmap example with legend">Static Heatmap with Legend</a>
                    </li>
                    <li>
                        <a href="example-heatmap-click.html" title="realtime heatmap example showing mouse clicks">Realtime Heatmap - Mouse Clicks</a>
                    </li>
                    <li>
                        <a href="example-heatmap-mousemove.html" title="realtime heatmap example showing mouse movement">Realtime Heatmap - Mouse Movement</a>
                    </li>
                    <li class="nav-header">
                    Map Layer Examples
                    </li>
                    <li>
                        <a href="example-heatmap-googlemaps.html" title="google maps v3 heatmap layer example">Google Maps V3 Layer</a>
                    </li>
                    <li>
                        <a href="example-heatmap-openlayers.html" title="openlayers heatmap layer example">Openlayers Layer</a>
                    </li>
                    <li>
                        <a href="example-heatmap-openlayers-renderer.html" title="openlayers heatmap renderer vectorial layers example">Openlayers Renderer for vectorial layers</a>
                    </li>
                    <li class="active">
                        <a href="example-heatmap-arcgis.html" title="arcgis heatmap example">ArcGIS Layer</a>
                    </li>
                    <li>
                        <a href="example-heatmap-leaflet.html" title="leaflet heatmap example">Leaflet Layer</a>
                    </li>
                </ul>
            </div>
            <div class="tabbable span7" style="width:615px;"> <!-- Onlyrequired for left/right tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Live Demo</a></li>
                    <li><a href="#tab2" data-toggle="tab">Code</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                    <div style="padding:8px 0">This is a demonstration of a canvas heatmap overlay with the <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/"
                target="_blank">ArcGIS API for JavaScript</a>.</div>
                        <div id="heatmapArea" class="well" style="width:610px;padding:0;height:400px;cursor:pointer;position:relative;">
                <div id="heatLayer"></div>
                <div id="map"></div>
                        </div>
                                            </div>
                    <div class="tab-pane" id="tab2">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
...
 &lt;link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"&gt;
    &lt;script type="text/javascript"&gt;
            var djConfig = {
                parseOnLoad: true
            };
        &lt;/script&gt;
        &lt;script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css" /&gt;
        &lt;script type="text/javascript" src="src/heatmap.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="src/heatmap-arcgis.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            dojo.require("esri.map");
            dojo.require("esri.layers.FeatureLayer");

            // Variables
            var map;
            var heatLayer;
            var featureLayer;

            // get the features within the current extent from the feature layer
            function getFeatures() {
                // set up query
                var query = new esri.tasks.Query();
                // only within extent
                query.geometry = map.extent;
                // give me all of them!
                query.where = "1=1";
                // make sure I get them back in my spatial reference
                query.outSpatialReference = map.spatialReference;
                // get em!
                featureLayer.queryFeatures(query, function (featureSet) {
                    var data = [];
                    // if we get results back
                    if (featureSet && featureSet.features && featureSet.features.length &gt; 0) {
                        // set data to features
                        data = featureSet.features;
                    }
                    // set heatmap data
                    heatLayer.setData(data);
                });
            }

            // Init
            function init() {
                window.prettyPrint && prettyPrint();
                // initial extent of map
                var initExtent = new esri.geometry.Extent({
                    xmax: -13624229.32056175,
                    xmin: -13625120.886837104,
                    ymax: 4548374.604660432,
                    ymin: 4547966.144290476,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                // create map
                map = new esri.Map("map", {
                    extent: initExtent,
                    sliderStyle: "small"
                });
                //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);
                // once map is loaded
                dojo.connect(map, 'onLoad', function (theMap) {
                    //resize the map when the browser resizes
                    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                    // create heat layer
                    heatLayer = new HeatmapLayer({
                        /* config: {
                            "useLocalMaximum": true,
                            "radius": 90,
                            "gradient": {
                                0.45: "rgb(000,000,255)",
                                0.55: "rgb(000,255,255)",
                                0.65: "rgb(000,255,000)",
                                0.95: "rgb(255,255,000)",
                                1.00: "rgb(255,000,000)"
                            }
                        }, */
                        "map": map,
                        "domNodeId": "heatLayer",
                        "opacity": 0.85
                    });
                    // add heat layer to map
                    map.addLayer(heatLayer);
                    // resize map
                    map.resize();
                    // create feature layer to get the points from
                    featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
                        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                        visible: false
                    });
                    map.addLayer(featureLayer);
                    // get features from this layer
                    getFeatures();
                    // on map extent change
                    dojo.connect(map, "onExtentChange", function (extent) {
                        // get features
                        getFeatures();
                        featureLayer.hide();
                        heatLayer.show();
                    });
                    
                });
            }
            // call init on load of dojo
            dojo.addOnLoad(init);
        &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="heatmapArea" class="well" style="width:610px;padding:0;height:400px;cursor:pointer;position:relative;"&gt;
                &lt;div id="heatLayer"&gt;&lt;/div&gt;
                &lt;div id="map"&gt;&lt;/div&gt;
                        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
                    </div>
                </div>
            </div>
        </div>
        <hr>
      <footer>
        <p style="width:330px;margin:auto;">heatmap.js by <a href="http://www.patrick-wied.at/" title="patrick wied javascript developer" target="_blank">Patrick Wied</a> (<a href="http://twitter.com/patrickwied" target="_blank">@patrickwied</a>) 2011-2013</p>
      </footer>
<a href="https://github.com/pa7/heatmap.js" target="_blank"><img style="position: fixed; top: 0; left: 0; border: 0;z-index:10000" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
    </div> <!-- /container -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-tab.js"></script>

    <!-- Remove this from your site, it's my analytics script !-->
    <script type="text/javascript">
      var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.patrick-wied.at/helper/piwik/" : "http://www.patrick-wied.at/helper/piwik/");
      document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
      </script><script type="text/javascript">
      try {
      var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
      piwikTracker.trackPageView();
      piwikTracker.enableLinkTracking();
      } catch( err ) {}
    </script><noscript><p><img src="http://www.patrick-wied.at/helper/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
    <!-- End of Analytics Script -->
  </body>
</html>

